<template>
	<view>
		<view class="mallorder">
		    <view class="nav flex-aro">
		        <view @tap="changeStatus" :class="'item ' + (status == 10 ? 'active' : '')" data-status="10">全部</view>
		        <view @tap="changeStatus" :class="'item ' + (status == 0 ? 'active' : '')" data-status="0">待付款</view>
		        <!-- <view @tap="changeStatus" :class="'item ' + (status == 1 ? 'active' : '')" data-status="1">待使用</view> -->
		        <view @tap="changeStatus" :class="'item ' + (status == 2 ? 'active' : '')" data-status="2">待评价</view>
		        <view @tap="changeStatus" :class="'item ' + (status == 3 ? 'active' : '')" data-status="3">已完成</view>
		        <!-- <view @tap="changeStatus" :class="'item ' + (status == 4 ? 'active' : '')" data-status="4">已退款</view> -->
		    </view>
		    <view>
		        <view class="order-list">
		            <navigator :url="'/pages2/group/merchant/merchant?id=' + order.store_id" class="order-item" v-for="(order, index) in list" :key="order.id">
		                <view  class="flex-y-center shop">
		                    <view class="flex-y-center flex-grow-1">
		                        <image :src="order.store.image" class="icon1"></image>
		                        <view style="white-space: nowrap;text-overflow: ellipsis;overflow: hidden;width: 422rpx;">{{ order.store.name }}</view>
		                    </view>
		                    <view v-if="order.status == 0" style="color: #999">待支付</view>
		                    <!-- <view v-if="order.status == 1" style="color: #999">待使用</view> -->
		                    <view v-if="(order.status == 2 || order.status == 3 )&& order.is_comment == 0 && order.is_refund == 0" style="color: #999">待评价</view>
		                    <view v-if="order.status == 3 && order.is_comment == 1 && order.is_refund == 0" style="color: #999">已完成</view>
		                    <!-- <view v-if="order.is_refund == 1" style="color: red">已退款</view> -->
		                </view>
		
		                <view class="flex-row order-info">
		                    <view class="flex-grow-1">订单号:{{ order.order_no }}</view>
		                    <view class="flex-grow-0">{{ order.createtime }}</view>
		                </view>
		
		                <view class="goods-list">
		                    <view class="goods-item flex-row">
		                    
		                        <view class="flex-grow-1 flex-col">

		                            <view class="price">订单总额 : ￥{{ order.total_money }}</view>
		                            <view class="price">面值 : ￥{{ order.money }}</view>
		                            <view class="price">赠送{{money_name}} : {{ order.score }}{{money_name}}</view>
		                            <view class="price">剩余次数 : {{ order.number - order.use_num }}/{{ order.number }}</view>
		                           <view class="price" v-if="order.usetime">核销时间 : {{ order.usetime}}</view>
		                        </view>
		                    </view>
		                </view>
		
		                <view class="flex-bet">
		                    <view></view>
		                    <view class="flex-grow-0 flex-y-center flex-row">
		                        <block>
		                            <view class="flex-grow-1 flex-y-center" v-if="order.status == 0 || order.is_pay == 0">
		                                <button @tap.stop.prevent="orderPay" :data-index="index" :data-id="order.id" class="order-option-btn ora-btn">付款</button>
		                                <button @tap.stop.prevent="del" :data-id="order.id" class="order-option-btn">删除</button>
		                            </view>
		                        </block>
		                        <view class="flex-grow-1" v-if="order.status == 1 && order.is_pay == 1">
		                            <button @tap.stop.prevent="orderRevoke" :data-id="order.id" class="order-option-btn">取消</button>
		                        </view>
		                     <!--   <block v-if="order.status == 1 ||order.status == 2">
		                            <view class="flex-grow-1 flex-row">
		                                <view class="flex-grow-0">
		                                    <button class="order-option-btn ora-btn" :data-qrcode="order.qrcode" @tap.stop.prevent="hx">核销码</button>
		                                </view>
		                            </view>
		                        </block> -->
		                   
		                        <block v-if="order.is_comment == 0 && (order.status == 2 || order.status == 3) ">
		                            <view class="flex-grow-1 flex-row">
		                                <view class="flex-grow-0">
		                                    <button class="order-option-btn ora-btn" :data-id="order.id" @tap.stop.prevent="pingjiaTap">去评价</button>
		                                </view>
		                            </view>
		                        </block>
		                        <block v-if="order.status == 3 && order.is_comment == 1">
		                            <view class="flex-grow-1 flex-row">
		                                <view class="flex-grow-0">
		                                    <button class="order-option-btn ora-btn" :data-store_id="order.store_id" @tap="againBuy">再次购买</button>
		                                </view>
		                            </view>
		                        </block>
		                    </view>
		                </view>
		            </navigator>
		        </view>
		    </view>
		</view>
		<view v-if="showQrcode" class="showQrcode">
		    <view class="Qrcodebox">
		        <image mode="aspectFill" :src="qrcode"></image>
		    </view>
		    <image src="/static/images/close.png" class="close" @tap="hideQrcode"></image>
		</view>
		<block v-if="list.length == 0">
		    <view style="text-align: center">
		        <image src="/static/images/Cn3VLepkZwbG0iN9.png" style="width: 300rpx; height: 300rpx; margin-top: 94rpx"></image>
		        <view style="color: gray; text-align: center; margin-top: 20rpx">暂无订单</view>
		    </view>
		</block>
		<view v-if="!has_more && list.length > 0" style="color: gray; text-align: center; margin-top: 20rpx">没有了~</view>
	</view>
</template>

<script>
	import {Store} from '../../../apirequest/store-model.js';
	var s = new Store();
	export default {
		data() {
			return {
				list: [],
				status: 10,
				page: 1,
				has_more: true,
				qrcode: '',
				showQrcode: false,
				money_name:this.globalData.money_name,
			}
		},
		  /**
		   * 生命周期函数--监听页面显示
	   */
	  onShow: function () {
		this.list = []
		this.page = 1
		this.has_more = true
		this._getList();
	  },
		onReachBottom: function () {
		  this._getList();
		},
		methods: {
			_getList(){
			  var that = this;
			  var page = this.page
			  if(!this.has_more){
			    return false;
			  }
			  s.get_voucher_order_list({page:page,status:this.status},(res) => {
			    if(res.code == 1){
			      var list = that.list
			      list = list.concat(res.data.data)
			      that.list = list
				  that.page = page+1
				  that.has_more =res.data.has_more
			    }
			  })
			},
			changeStatus(e){
				this.status = e.currentTarget.dataset.status
				this.list = []
				this.page = 1
				this.has_more = true
				this._getList();
			},
			del: function (e) {
			    var that = this;
			    var id = e.currentTarget.dataset.id;
			    uni.showModal({
			        title: '提示',
			        content: '确认删除吗?',
					
			        success(res) {
			            if (res.confirm) {
			               s.voucher_order_del({order_id:id},(res) => {
							   uni.showToast({
							   	title:res.msg,
								icon:'none'
							   })
							   if(res.code == 1){
								   setTimeout(() => {
									   that.list = []
									   that.page = 1
									   that.has_more = true
									   that._getList()
								   },1000)
								
							   }
						   })
			            } else if (res.cancel) {
			                console.log('用户点击取消');
			            }
			        }
			    });
			},
			
			orderPay: function (e) {
			    var index = e.currentTarget.dataset.index;
			    var order = this.list[index];
			    uni.navigateTo({
			        url: '/pages2/ticket/pay/pay?order_id=' + order.id + '&id=' + order.store_voucher_id + '&num=' + order.number
			    });
			},
			
			//再次购买
			againBuy: function (e) {
			    var id = e.currentTarget.dataset.store_id;
			    uni.navigateTo({
			        url: '/pages2/group/merchant/merchant?id=' + id
			    });
			},
			
			pingjiaTap: function (e) {
			    var id = e.currentTarget.dataset.id;
			    uni.navigateTo({
			        url: '/pages2/shop/order-comment/order-comment?type=voucher&id=' + id
			    });
			},
			

			
			orderRevoke: function (e) {
			    var that = this;
			    var id = e.currentTarget.dataset.id;
			    uni.showModal({
			        title: '提示',
			        content: '确认取消吗?',
			
			        success(res) {
			            if (res.confirm) {
			              s.voucher_order_cancel({id:id},(res) => {
							  uni.showToast({
							  	title:res.msg,
								icon:'none'
							  })
							  if(res.code == 1){
								  setTimeout(() => {
									 that.list = []
									 that.page = 1
									 that.has_more = true
									 that._getList(); 
								  },1000)
							  }
						  })
			            } else if (res.cancel) {
			                console.log('用户点击取消');
			            }
			        }
			    });
			},
			
			//核销码
			hx: function (e) {
			    var code = e.currentTarget.dataset.qrcode;
				this.qrcode=code,
				this.showQrcode=true
			  
			},
			
			//关闭核销码
			hideQrcode: function (e) {
				this.showQrcode=false
			},
			
			// 跳转店铺详情
			shopdetails: function (e) {
			    var id = e.currentTarget.dataset.id;
			    uni.navigateTo({
			        url: '/pages/orderDishes/orderDishes?id=' + id + '&tabcurrent=2'
			    });
			},
		}
	}
</script>

<style>
.cutorder {
    text-align: right;
    color: #cc3433;
    padding: 20rpx;
}
page {
    background: #f5f7f9;
    font-size: 0.75rem;
    margin-bottom: 100rpx;
}
.mallorder .top {
    height: 80rpx;
    width: 100%;
}
.mallorder .nav {
    background: #fff;
}
.mallorder .nav .active {
    border-bottom: 4rpx solid #FF4544;
    color: #FF4544;
}
.mallorder .nav .item {
    padding: 25rpx 0;
}
.order-list {
    height: 100%;
    font-size: 11pt;
    color: #555;
    margin-top: 30rpx;
}
.order-list .order-item {
    background: #fff;
    padding: 32rpx 24rpx;
    margin-bottom: 20rpx;
    border-bottom: 1rpx solid #e3e3e3;
}

.order-list .order-info {
    font-size: 9pt;
    color: #888;
}

.goods-item {
    background: #fff;
    border-bottom: 1rpx solid #e3e3e3;
    padding: 32rpx 0;
    border-bottom: 1rpx solid #eee;
    margin: 20rpx 0;
}

.goods-item:first-child {
    border-top: 1rpx solid #eee;
}

.goods-item .goods-pic {
    width: 156rpx;
    height: 156rpx;
    margin-right: 20rpx;
    border-radius: 10rpx;
}

.goods-item .goods-name {
    margin-bottom: 10rpx;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 0.85rem;
}
.goods-item .price {
    margin: 10rpx 0;
}
.goods-item .attr-list,
.goods-item .num {
    font-size: 9pt;
    color: #888;
}

.goods-item .attr-list .attr-item {
    display: inline-block;
    margin-right: 36rpx;
}

.goods-item .attr-list .attr-item:last-child {
    margin-right: 0;
}

.order-option-btn {
    border: 1rpx solid #ddd;
    background: #fff;
    border-radius: 10rpx;
    height: 60rpx;
    line-height: 60rpx;
    color: inherit;
    margin-left: 30rpx;
    padding: 0 30rpx;
    font-size: 0.85rem;
    font-weight: 500;
    background: #ddd;
    color: #fff;
}

.order-option-btn::after {
    display: none;
}

.return-index-btn {
    position: fixed;
    right: 0;
    bottom: 100rpx;
    display: inline-block;
    background: rgba(157, 157, 157, 0.5);
    padding: 10rpx 20rpx;
    z-index: 1000;
    border-radius: 10rpx 0 0 10rpx;
}

.hide {
    display: none;
}

.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 9999;
}
.ora-btn {
    background: #1576fb;
    color: #fff;
    border: 1rpx solid #1576fb;
}
button:not([size='mini']) {
    width: initial !important;
    margin-right: 0 !important;
    margin-left: 25rpx !important;
}
.showQrcode {
    position: fixed;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    top: 0;
    left: 0;
    text-align: center;
}
.showQrcode .Qrcodebox {
    background: #fff;
    position: fixed;
    width: 70%;
    left: 15%;
    padding: 2%;
    border-radius: 10rpx;
    top: 30%;
    text-align: center;
}
.showQrcode .Qrcodebox image {
    width: 400rpx;
    height: 400rpx;
}
.showQrcode .close {
    width: 80rpx;
    height: 80rpx;
    position: relative;
    top: 75%;
}
.zhaoc {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background-color: #000;
    opacity: 0.7;
    z-index: 200;
}
.code-box {
    position: fixed;
    text-align: center;
    background: #fff;
    width: 90%;
    left: 5%;
    top: 30%;
    border-radius: 16rpx;
    z-index: 999;
    font-size: 0.85rem;
    padding-bottom: 24rpx;
}
.code-text {
    margin: 30rpx 0;
}
.code-ipt {
    background: #dbf2ff;
    text-align: center;
    width: 80%;
    margin: 30rpx auto;
}
.confirm-btn {
    margin: 30rpx auto;
    line-height: 60rpx;
    width: 194rpx;
    border-radius: 30rpx;
    font-size: 0.85rem;
    color: #fff;
}
/* .close{
  color: #333;
  font-size: 0.65rem;
  margin-bottom: 20rpx
} */
.code-box .title {
    font-size: 0.95rem;
    padding: 30rpx;
    text-align: center;
    border-bottom: 1px solid #eee;
}
.cover-box .cancel-btn {
    color: #999;
    font-size: 0.95rem;
    margin: 15rpx 60rpx 15rpx;
}
.cover-box .confirm-btn {
    color: #03b16c;
    font-size: 0.95rem;
}
.show {
    display: block;
}
.hide {
    display: none;
}
.buy-btn:not([size='mini']) {
    width: 105px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}
.shop {
    padding-bottom: 20rpx;
}
.shop .icon1 {
    width: 40rpx;
    height: 40rpx;
    margin-right: 5rpx;
}
.shop .icon2 {
    width: 23rpx;
    height: 23rpx;
    margin-left: 10rpx;
}
</style>
